<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            background-color: green;
            width: 100px;
            height: 200px;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="box"></div>
<input type="button" id="btn" value="点我">
<script>
    function $(id){
        return document.getElementById(id);
    }
    var box = $('box');
    //
    //console.log(box);
    //非IE下运行
//    var cssObj = window.getComputedStyle(box);
//    alert(cssObj.width);

    //在IE下运行
//    var cssOjb = box.currentStyle;
//    alert(cssOjb.width);

   function getCssObj(obj){
       if (window.getComputedStyle){
           alert('支持getComputedStyle')
           var cssObj = window.getComputedStyle(box);
       } else {
           alert('不支持getComputedStyle');
           var cssObj = box.currentStyle;

       }
       return cssObj;
   }

    function getCssObjAttr(obj,attr){
        var cssObj = getCssObj(obj);//调用上面做好的函数
        var attrValue = cssObj[attr];
        if (attrValue.search('px')!=-1){
            attrValue = parseInt(attrValue)
        }
        return attrValue

    }


   var o = getCssObj(box);
    var w = getCssObjAttr(box,'width');
    var pos = getCssObjAttr(box,'position');
    console.log(w);
    console.log(pos);


</script>

</body>
</html>